<template>
    <div class="content-bd">
        <!--        加载动画嵌入-->
        <div class="ant-spin-nested-loading">
            <!--            动画遮罩-->
            <div class="ant-spin-container">
                <!--                表单本体-->
                <a-form ref="form" :model="form">
<!--                    <a-form-item class="add-top-ope">-->
<!--                        <div class="ope-r">-->
<!--                            <a-button plain class="ant-btn fr ant-btn-sub" size="small">从销售订单复制</a-button>-->
<!--                        </div>-->
<!--                    </a-form-item>-->
                    <div class="add-base-info">
                        <a-row>
                            <a-col :span="8">
                                <a-form-item v-bind="formItemLayout" label="销售日期">
                                    <a-date-picker v-decorator="['date-picker', config]"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                            <a-row>
                            <a-col :span="8">
                                <a-form-item v-bind="formItemLayout" label="客户">
                                    <div class="modal-container modal-size">
                                        <div>
                                            <a-select placeholder="、" style="min-width: 200px"
                                                      v-bind="formItemLayout">
                                                <div slot="dropdownRender" slot-scope="menu">
                                                    <v-nodes :vnodes="menu"/>
                                                    <a-divider style="margin: 4px 0;"/>
                                                    <div style="padding: 8px; cursor: pointer;">
                                                        <a-icon type="plus"/>
                                                        Add item
                                                    </div>
                                                </div>
                                                <a-select-option value="jack">Jack</a-select-option>
                                                <a-select-option value="lucy">Lucy</a-select-option>
                                            </a-select>
                                        </div>
                                    </div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item v-bind="formItemLayout" label="联系人">
                                    <a-input/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item v-bind="formItemLayout" label="联系电话">
                                    <a-input/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </div>
                    <div class="add-prod-list">
                        <!--                        请求拦截加载动画-->
                        <!--                        <a-spin tip="Loading...">-->
                        <!--                        动画遮罩层-->
                        <!--                            <div class="spin-content">-->
                        <div class="ant-spin-container">
                            <!--                                表单内容-->，
                            <a-table
                                    :columns="columns"
                                    :dataSource="data"
                                    :scroll="{ x: 1600 }"
                                    bordered
                                    :pagination="false">
                                <template slot="footer" slot-scope="currentPageData">
                                    <div class="tb-footer-wrap clearfix">
                                        <div class="tota">
                                            <span>总数量: <b>0.000</b></span>
                                            <span>含税总金额: <b>0.00</b>元</span>
                                        </div>
                                    </div>
                                </template>
                            </a-table>
                            <a-row class="mt20">
                                <a-col :span="8">
                                    <a-form-item>
                                        <a-input addonBefore="录单专用" placeholder="扫码录单专用"/>
                                        <a-icon type="question-circle" theme="filled" class="scan-tip"
                                                style="display: inline-block"/>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </div>
                        <!--                        </a-spin>-->
                    </div>
                    <div class="add-other-info">
                        <a-row>
                            <a-col :span="8">
                                <a-form-item v-bind="formItemLayout" label="交货地址">
                                    <div class="modal-container modal-size">
                                        <div>
                                            <a-select placeholder="请先在客户信息内新增交货地址" style="min-width: 200px"
                                                      v-bind="formItemLayout">
                                                <div slot="dropdownRender" slot-scope="menu">
                                                    <v-nodes :vnodes="menu"/>
                                                    <a-divider style="margin: 4px 0;"/>
                                                    <div style="padding: 8px; cursor: pointer;">
                                                        <a-icon type="plus"/>
                                                        Add item
                                                    </div>
                                                </div>
                                                <a-select-option value="jack">Jack</a-select-option>
                                                <a-select-option value="lucy">Lucy</a-select-option>
                                            </a-select>
                                        </div>
                                    </div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item v-bind="formItemLayout" label="项目">
                                    <div class="modal-container modal-size">
                                        <div>
                                            <a-select placeholder="选择项目" style="min-width: 200px"
                                                      v-bind="formItemLayout">
                                                <div slot="dropdownRender" slot-scope="menu">
                                                    <v-nodes :vnodes="menu"/>
                                                    <a-divider style="margin: 4px 0;"/>
                                                    <div style="padding: 8px; cursor: pointer;">
                                                        <a-icon type="plus"/>
                                                        Add item
                                                    </div>
                                                </div>
                                                <a-select-option value="jack">Jack</a-select-option>
                                                <a-select-option value="lucy">Lucy</a-select-option>
                                            </a-select>
                                        </div>
                                    </div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item v-bind="formItemLayout" label="结算方式">
                                    <div class="modal-container modal-size">
                                        <div>
                                            <a-select placeholder="选择结算方式" style="min-width: 200px"
                                                      v-bind="formItemLayout">
                                                <div slot="dropdownRender" slot-scope="menu">
                                                    <v-nodes :vnodes="menu"/>
                                                    <a-divider style="margin: 4px 0;"/>
                                                    <div style="padding: 8px; cursor: pointer;">
                                                        <a-icon type="plus"/>
                                                        Add item
                                                    </div>
                                                </div>
                                                <a-select-option value="jack">Jack</a-select-option>
                                                <a-select-option value="lucy">Lucy</a-select-option>
                                            </a-select>
                                        </div>
                                    </div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item v-bind="formItemLayout" label="客户订单号">
                                    <a-input/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                            <a-row>
                            <a-col :span="8">
                                <a-form-item v-bind="formItemLayout" label="销售方">
                                    <a-input/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item v-bind="formItemLayout" label="销售员">
                                    <a-input/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item v-bind="formItemLayout" label="销售员电话">
                                    <a-input/>
                                </a-form-item>
                            </a-col>

                        </a-row>
                        <a-row>
                            <a-col :span="8">
                                <a-form-item v-bind="formItemLayout" label="自定义">
                                    <a-row>
                                        <a-col :span="11">
                                            <div class="field-name">
                                                <a-input placeholder="选择频次"/>
                                            </div>
                                        </a-col>
                                        <a-col :span="13">
                                            <a-input placeholder=" "/>
                                        </a-col>
                                    </a-row>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="8" style="margin-left:-30px">
                            <a-col :span="3">
                                <a-form-item label="备注" style="float:right;">
                                </a-form-item>
                            </a-col>
                            <a-col :span="21">
                                <a-textarea
                                        placeholder="备注"
                                        :autosize="{ minRows: 5, maxRows: 8 }"/>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="8">
                                <a-form-item v-bind="formItemLayout" label="上传">
                                    <!--          a-upload  加这个属性 action="https://www.mocky.io/v2/5cc8019d300000980a055e76"-->
                                    <a-upload
                                            name="file"
                                            :multiple="true"
                                            :headers="headers"
                                            @change="handleChange"
                                    >
                                        <a-button>
                                            <a-icon type="upload"/>
                                            添加附件
                                        </a-button>
                                    </a-upload>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </div>
                    <div class="content-fd">
                        <a-button type="primary" style="background-color:#479e73">确定</a-button>
                        <a-button>取消</a-button>
                    </div>
                </a-form>
            </div>
        </div>
    </div>
</template>

<script>
    const columns = [
        {title: '', width: 100, dataIndex: 'name', key: 'name', fixed: 'left'},
        {title: '物品编号', dataIndex: 'address', key: '1', width: 200},
        {title: '物品名称', dataIndex: 'address', key: '2', width: 200},
        {title: '型号规格', dataIndex: 'address', key: '3', width: 150},
        {title: '单位', dataIndex: 'address', key: '4', width: 100},
        {title: '采购数量', dataIndex: 'address', key: '5', width: 100},
        {title: '含税单价', dataIndex: 'address', key: '6', width: 200},
        {title: '价税合计', dataIndex: 'address', key: '7', width: 200},
        {title: '上游订单', dataIndex: 'address', key: '8', width: 170},
        {title: '交付日期', dataIndex: 'address', key: '9', width: 150},
        {title: '备注', dataIndex: 'address', key: '10', width: 200}
    ];

    const data = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York Park',
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 40,
            address: 'London Park',
        },
    ];

    export default {
        name: "ContentBody",
        data() {
            return {
                data,
                columns,


                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formItemLayout: {
                    labelCol: {
                        xs: {span: 24},
                        sm: {span: 8},
                    },
                    wrapperCol: {
                        xs: {span: 24},
                        sm: {span: 16},
                    },
                },
                formItemLayoutWithOutLabel: {
                    wrapperCol: {
                        xs: {span: 24, offset: 0},
                        sm: {span: 20, offset: 4},
                    },
                },
                config: {
                    rules: [{type: 'object', required: true, message: 'Please select time!'}],
                },
                headers: {
                    authorization: 'authorization-text',
                },
            };

        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            handleChange(info) {
                if (info.file.status !== 'uploading') {
                    console.log(info.file, info.fileList);
                }
                if (info.file.status === 'done') {
                    this.$message.success(`${info.file.name} file uploaded successfully`);
                } else if (info.file.status === 'error') {
                    this.$message.error(`${info.file.name} file upload failed.`);
                }
            },

        }


    }
</script>

<style lang="stylus" scoped>
    .field-name {
        padding-right 20px
    }

    .field-val {
        position relative
    }

    .ant-calendar-picker {
        width: 100%;
    }

    .mt20
        margin-top 20px

        .content-bd
            margin: 0;
            min-height: calc(100vh - 99px);
            background: #fff;
            padding: 20px 20px 72px;

            .ant-spin-nested-loading
                position relative

                .ant-spin-container
                    position: relative
                    transition: opacity .3

                    .add-top-ope
                        height: 50px !important;
                        line-height: 50px;
                        margin: -20px -20px 20px !important;
                        padding: 0 20px !important;
                        border-bottom: 1px solid #eee !important;

                        .ope-r
                            padding-top: 9px;

                            .ant-btn
                                padding: 0 20px;

                    .ant-row
                        position: relative;
                        height: auto;
                        margin-right: 0;
                        margin-left: 0;
                        zoom: 1;
                        display: block;
                        box-sizing: border-box;

        .ant-calendar-picker {
            width 100%
        }


        th.column-money,
        td.column-money {
            text-align: right !important;
        }

        .scan-tip {
            position: absolute;
            right: -20px;
            top: 50%;
            font-size: 16px;
            color: #fb982a;
            margin-top: -8px;
        }

        .modal-container {
            display: inline-block;
        }

    .modal-size {
        width 100%
    }


    .tb-footer-wrap {
        height: 18px;
        line-height: 18px;
    }

    .tb-footer-wrap .tota {
        float: right;
        overflow: hidden;
    }

    .tb-footer-wrap .tota span {
        float: left;
        margin-left: 20px;
    }

    .tb-footer-wrap .tota span b {
        color: #e53e3e;
        font-weight: 400;
    }

    .content-fd {
        position: fixed;
        z-index: 1000;
        right: 22px;
        left: 188px;
        bottom: 0;
        padding: 12px 0;
        background: #fff;
        text-align: center;
        box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, .2);
        transition: left .2s, padding .2s;
        margin: 0 -8px;
    }

    .content-fd .ant-btn {
        margin: 0 10px;
    }
</style>